<template>
  <view class="community-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="search-box">
        <input type="text" placeholder="搜索健康话题" />
      </view>
      <view class="notification">
        <text class="iconfont icon-notification"></text>
      </view>
    </view>

    <!-- 横滑职业分类栏 -->
    <scroll-view scroll-x class="category-bar">
      <view
        v-for="(cat, idx) in displayCategories"
        :key="cat.id"
        :class="['category-item', currentCategory.id === cat.id ? 'active' : '']"
        @tap="selectCategory(cat)"
      >
        {{ cat.name }}
      </view>
      <view class="category-item more-btn" @tap="showAllCategories">...</view>
    </scroll-view>

    <!-- 分类弹窗 -->
    <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
        <input v-model="searchCategory" placeholder="输入/搜索职业类别" />
        <view class="all-category-list">
          <view
            v-for="cat in filteredCategories"
            :key="cat.id"
            class="all-category-item"
            @tap="selectCategory(cat, true)"
          >
            {{ cat.name }}
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 内容区 -->
    <scroll-view 
      scroll-y 
      class="content-area"
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
    >
      <view class="post-list">
        <view class="post-item" v-for="(item, index) in filteredPosts" :key="index">
          <!-- 帖子内容同原来 -->
          <view class="user-info">
            <image :src="item.avatar" class="avatar"></image>
            <view class="user-detail">
              <text class="username">{{item.username}}</text>
              <text class="time">{{item.time}}</text>
            </view>
          </view>
          <view class="post-content">
            <text class="text">{{item.content}}</text>
            <view class="image-grid" v-if="item.images && item.images.length">
              <image 
                v-for="(img, imgIndex) in item.images" 
                :key="imgIndex" 
                :src="img"
                mode="aspectFill"
                @tap="previewImage(item.images, imgIndex)"
              ></image>
            </view>
          </view>
          <view class="action-bar">
            <view class="action-item" @tap="handleLike(item)">
              <text class="iconfont icon-like"></text>
              <text>{{item.likes}}</text>
            </view>
            <view class="action-item" @tap="handleComment(item)">
              <text class="iconfont icon-comment"></text>
              <text>{{item.comments}}</text>
            </view>
            <view class="action-item" @tap="handleShare(item)">
              <text class="iconfont icon-share"></text>
              <text>分享</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" @tap="switchTab('home')">
        <text class="iconfont icon-home"></text>
        <text>首页</text>
      </view>
      <view class="tab-item" @tap="switchTab('discover')">
        <text class="iconfont icon-discover"></text>
        <text>发现</text>
      </view>
      <view class="tab-item publish" @tap="showPublish">
        <text class="iconfont icon-add"></text>
      </view>
      <view class="tab-item" @tap="switchTab('message')">
        <text class="iconfont icon-message"></text>
        <text>消息</text>
      </view>
      <view class="tab-item" @tap="switchTab('profile')">
        <text class="iconfont icon-profile"></text>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      categories: [
        { id: 0, name: '最热' },
        { id: 1, name: '程序员' },
        { id: 2, name: '办公室职员' },
        { id: 3, name: '律师' },
        { id: 4, name: '医生' },
        // ...更多
      ],
      currentCategory: { id: 0, name: '最热' },
      searchCategory: '',
      posts: [/* 帖子数据，含职业类别字段 */],
    }
  },
  onLoad() {},
  methods: {
    selectCategory(cat, closePopup = false) {
      this.currentCategory = cat
      if (closePopup) this.$refs.popup.close()
    },
    showAllCategories() {
      this.$refs.popup.open()
    }
  },
  computed: {
    displayCategories() {
      // 只显示前7个，剩下的通过...弹窗展示
      return this.categories.slice(0, 7)
    },
    filteredCategories() {
      if (!this.searchCategory) return this.categories
      return this.categories.filter(cat =>
        cat.name.includes(this.searchCategory)
      )
    },
    filteredPosts() {
      if (this.currentCategory.id === 0) return this.posts
      return this.posts.filter(post => post.categoryId === this.currentCategory.id)
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.community-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 80rpx;
}

.search-box {
  flex: 1;
}

.notification {
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
}

.category-bar {
  position: fixed;
  top: 80rpx;
  left: 0;
  right: 0;
  z-index: 99;
  background: #fff;
  white-space: nowrap;
  overflow-x: auto;
  padding: 0 0 10rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  height: 60rpx;
}

.category-item {
  display: inline-block;
  padding: 10rpx 28rpx;
  margin-right: 16rpx;
  border: 1rpx solid #eee;
  border-radius: 32rpx;
  font-size: 28rpx;
  background: #f7f8fa;
  color: #333;
  transition: all 0.2s;
  line-height: 40rpx;
}

.active {
  border-color: #007bff;
  color: #007bff;
  background: #e6f0ff;
}

.more-btn {
  background: #f0f0f0;
  color: #888;
}

.popup-content {
  padding: 20rpx;
}

.all-category-list {
  margin-top: 20rpx;
}

.all-category-item {
  padding: 10rpx 20rpx;
  margin-bottom: 10rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
}

.content-area {
  flex: 1;
  padding: 20rpx;
  margin-top: 140rpx; /* 80rpx(nav) + 60rpx(category) */
  margin-bottom: 120rpx;
  box-sizing: border-box;
}

.post-list {
  padding: 20rpx;
  margin-top: 70rpx; /* 这里的70rpx要和分类栏高度一致或略大 */
}

.post-item {
  margin-bottom: 20rpx;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #eee;
  z-index: 100;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.tab-item.publish {
  background-color: #007AFF;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-top: -30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
}

.tab-item.publish text {
  color: #ffffff;
  font-size: 40rpx;
}
</style>
